<template>
  <div class="category" v-show="showType===0">
    <router-link  class="hot" to="/hot" target="_blank">
      <div class="img-dt"><img :src="ImgURL+'/img/tximg/tx1.jpg'" alt=""></div>
      <div class="info">动态</div>
    </router-link>
    <router-link  class="hot" to="/hot" target="_blank">
      <div class="iconfont icon-hot"></div>
      <div class="info">热门</div>
    </router-link>
    <div class="category-list" :style="{
      'grid-template-columns':`repeat(${proxy.rowCategoryCount},1fr)`
    }">
    <template v-for="index in showItemCount">
      <el-popover
        :width="187"
        trigger="hover"
        :show-after="false"
        :offset="5"
        :placement="index <= proxy.rowCategoryCount ? 'top' : 'bottom'"
        v-if="categoryStore.categoryList[index - 1].children &&
        categoryStore.categoryList[index - 1].children.length"
        >
          <template #reference>
            <router-link :class="[
                'category-item',categoryStore.categoryList[index - 1].categoryCode ==
              route.params.pCategoryCode ? 'active' : '',
            ]" :to="`/v/${categoryStore.categoryList[index - 1].categoryCode}`"
              >{{categoryStore.categoryList[index - 1].categoryName}}</router-link>
          </template>
          <div class="child-list">
            <div class="child" v-for=" sub in categoryStore.categoryList[index - 1].children">
              <router-link :title="sub.categoryName"
                           :to="`/v/${categoryStore.categoryList[index - 1].categoryCode}/${sub.categoryCode}`">
                {{ sub.categoryName }}
              </router-link>
            </div>
          </div>
        </el-popover>
        <router-link  v-else :class="[
          'category-item',categoryStore.categoryList[index - 1].categoryCode ==
          route.params.pCategoryCode ? 'active' : '']"
        :to="`/v/${categoryStore.categoryList[index - 1].categoryCode}`"
        >
          {{categoryStore.categoryList[index - 1].categoryName}}
        </router-link>
    </template>
    <template v-if="categoryStore.categoryList.length>proxy.rowCategoryCount*2">
          <el-popover
            :width="187"
            trigger="hover"
            :show-after="false"
            :offset="5"
            placement="bottom">
            <template #reference>
              <div class="category-item btn-category-more">
                更多<span class="iconfont icon-more"></span>
              </div>
            </template>
            <div class="child-list">
              <div class="child" v-for=" item in categoryStore.categoryList.slice(proxy.rowCategoryCount*2-1,
              categoryStore.categoryList.length)">
                <router-link :title="item.categoryName"
                             :to="`/v/${item.categoryCode}`" target="_blank">
                  {{ item.categoryName }}
                </router-link>
              </div>
            </div>
          </el-popover>
    </template>
    </div>
    <div class="channel-right">
      <div class="channel-list">
        <router-link class="channel-item" :to="RoutreRef.rou1.to" target="_blank">
          <svg t="1642646834655" class="icon side-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4061" width="200" height="200"><path d="M810.6496 153.6C843.6736 153.6 870.4 180.3264 870.4 213.3504v597.2992c0 33.024-26.7264 59.7504-59.7504 59.7504H213.3504A59.7504 59.7504 0 0 1 153.6 810.6496V213.3504C153.6 180.3264 180.3264 153.6 213.3504 153.6z m-332.8 460.8H341.3504a34.1504 34.1504 0 0 0 0 68.2496h136.4992a34.1504 34.1504 0 1 0 0-68.2496z m204.8-136.6016H341.3504a34.1504 34.1504 0 0 0 0 68.2496h341.2992a34.1504 34.1504 0 0 0 0-68.2496z m0-136.3968H341.3504a34.1504 34.1504 0 0 0 0 68.2496h341.2992a34.1504 34.1504 0 1 0 0-68.2496z" p-id="4062"></path></svg>
          <span>{{RoutreRef.rou1.title}}</span>
        </router-link>
        <router-link class="channel-item" :to="RoutreRef.rou2.to" target="_blank">
          <svg t="1642646710703" class="icon side-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3158" width="200" height="200"><path d="M682.6496 204.8512c35.4816 0 64.6656 27.136 67.9424 61.696l0.3072 6.6048V358.4l81.92-61.44a34.2016 34.2016 0 0 1 53.248 17.408l1.024 4.7616 0.3584 5.12v392.5504a34.1504 34.1504 0 0 1-50.2784 30.1056l-4.352-2.7648-81.92-61.4912v68.3008c0 33.1264-23.552 60.7232-54.8352 66.9696l-6.8608 1.024-6.5536 0.256H204.8a68.2496 68.2496 0 0 1-67.9936-61.696l-0.3072-6.5536V273.152c0-35.4816 27.136-64.6656 61.696-67.9936L204.8 204.8512h477.8496zM385.3824 389.12a34.1504 34.1504 0 0 0-34.0992 34.1504v179.6096a34.1504 34.1504 0 0 0 53.0432 28.416l134.7584-89.8048a34.1504 34.1504 0 0 0 0-56.832L404.3264 394.8544a34.1504 34.1504 0 0 0-18.944-5.7344z" p-id="3159"></path></svg>
          <span>{{RoutreRef.rou2.title}}</span>
        </router-link>
        <router-link class="channel-item" :to="RoutreRef.rou3.to" target="_blank">
          <svg t="1642646844599" class="icon side-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4188" width="200" height="200"><path d="M772.4544 229.2736l2.048 6.4512 87.2448 283.136c8.8576 33.1264-10.24 66.56-41.984 78.4384l-6.5536 2.048-118.1696 31.744a32.768 32.768 0 0 1-8.192 1.0752l-4.096-0.2048-124.672-14.6432-193.3824 51.8144 36.6592 136.704a49.152 49.152 0 0 1-93.184 30.8736l-1.792-5.4272L155.2896 267.264a49.152 49.152 0 0 1 93.184-30.8736l1.792 5.4272 4.096 15.36 188.928-50.6368a32.768 32.768 0 0 1 8.1408-1.0752l4.096 0.2048 124.5184 14.592 112.1792-30.0544c33.4336-8.96 68.1984 7.7824 80.2304 39.0144z" p-id="4189"></path></svg>
          <span>{{RoutreRef.rou3.title}}</span>
        </router-link>
        <router-link class="channel-item" :to="RoutreRef.rou4.to" target="_blank">
          <svg id="icon1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve" class="side-icon"><g><path class="st1" d="M16,3.7h-2.7c-1.6,0-2.5,1-3,1.8c-0.1,0.2-0.5,0.2-0.6,0c-0.4-0.7-1.3-1.8-3-1.8H4c-0.7,0-1.3,0.6-1.3,1.3v8.5
		c0,0.7,0.6,1.3,1.3,1.3h2.7c1.6,0,2.5,1.1,3,1.8c0.1,0.2,0.5,0.2,0.6,0c0.4-0.7,1.3-1.8,3-1.8H16c0.7,0,1.3-0.6,1.3-1.3V4.9
		C17.3,4.2,16.8,3.7,16,3.7z M9.2,10.5l-1.1,2l-1.1-2L5,9.4l2-1.1l1.1-2l1.1,2l2,1.1L9.2,10.5z M13.4,12l-0.6,1.1L12.1,12L11,11.4
		l1.1-0.6l0.6-1.1l0.6,1.1l1.1,0.6L13.4,12z"></path></g></svg>
          <span>{{RoutreRef.rou4.title}}</span>
        </router-link>
        <router-link class="channel-item" :to="RoutreRef.rou5.to" target="_blank">
          <svg t="1642670011510" class="icon side-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3116" width="200" height="200"><path d="M836.3008 170.6496c17.1008 0 31.2832 12.6464 33.7408 29.0816L870.4 204.8v316.16a34.1504 34.1504 0 0 1-29.0816 33.792l-5.0176 0.3584h-102.4v195.7888a34.1504 34.1504 0 0 1-29.1328 33.792l-5.0176 0.3584H386.7648l-127.3344 95.5392a34.2016 34.2016 0 0 1-53.248-17.3568l-1.024-4.8128-0.3584-5.12-0.0512-68.3008H153.6a34.1504 34.1504 0 0 1-32.6656-24.2176l-1.0752-4.8128-0.4096-5.0688v-409.6c0-17.152 12.6464-31.3344 29.0816-33.792L153.6 307.2h174.2336V204.8c0-17.152 12.6464-31.3344 29.1328-33.792l5.0176-0.3584h474.3168z m-477.9008 409.6H256l-5.0688 0.4096a34.1504 34.1504 0 0 0 0 67.4816l5.0688 0.4096h102.4l5.0688-0.4096A34.1504 34.1504 0 0 0 358.4 580.2496z m102.4-136.4992H256l-5.0688 0.4096a34.1504 34.1504 0 0 0 0 67.4816l5.0688 0.4096h204.8l5.0688-0.4096A34.1504 34.1504 0 0 0 460.8 443.7504z m341.2992-204.8512h-406.016v68.2496h303.616c17.152 0 31.3856 12.6464 33.792 29.1328l0.3584 5.0176v145.4592l68.2496 0.0512V238.8992z" p-id="3117"></path></svg>
          <span>{{RoutreRef.rou5.title}}</span>
        </router-link>
        <router-link class="channel-item" :to="RoutreRef.rou6.to" target="_blank">
          <svg t="1642669999866" class="icon side-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2989" width="200" height="200"><path d="M783.36 221.8496a102.4 102.4 0 0 1 102.0928 94.7712l0.3072 7.68v409.6a102.4 102.4 0 0 1-94.72 102.0928l-7.68 0.256H237.2096a102.4 102.4 0 0 1-102.0928-94.72l-0.3072-7.68v-409.6A102.4 102.4 0 0 1 229.5808 222.208l7.68-0.3072H783.36z m-155.5968 81.408a34.1504 34.1504 0 0 0-50.7904 23.6032l-54.1696 203.3152a128 128 0 1 0-108.288 220.8256l6.7584 1.024a128 128 0 0 0 141.5168-104.8576l71.7824-253.7984 47.4624 35.4816 3.2768 2.2016a34.1504 34.1504 0 0 0 37.5808-56.832l-91.8528-68.7616z" p-id="2990"></path></svg>
          <span>{{RoutreRef.rou6.title}}</span>
        </router-link>
      </div>
    </div>
  </div>
  <!--    固定在顶部-->
  <div :class="['category','category-pro',mouseOver ? '' : 'category-out']"
       v-show="showType === 1"
  >
    <router-link  class="hot" to="/hot" target="_blank">
      <svg t="1737873065209" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9101" width="200" height="200"><path d="M410.5664 1015.68l29.888 0c8 0 14.464-6.464 14.528-14.464 0.128-45.696 0.448-184.64-0.064-197.056-0.576-14.912 5.888-31.168 12.352-38.72 5.952-6.976 419.648-489.024 484.096-564.16 2.304-2.688 6.592-0.576 5.952 2.88-18.304 93.568-131.776 673.6-133.44 681.92-1.408 7.04-5.952 9.984-12.352 7.936-6.848-2.24-229.824-71.68-278.72-86.912-5.248-1.6-10.816 1.216-12.48 6.464l-8 24.192c-1.728 5.312 1.152 11.008 6.528 12.672 48.064 15.104 259.584 81.472 283.136 88.512 29.184 8.704 59.52-10.112 65.728-43.264 5.12-27.328 144-734.208 146.048-746.944 2.048-12.736 5.248-34.752-6.784-43.328-19.008-13.504-36.352-7.552-42.496-3.136-0.64 0.448-1.472 0.512-2.176 0.896l-3.2 1.792c0 0-900.16 480.64-932.288 497.984-32.128 17.28-30.656 53.76-3.776 62.528 23.936 7.744 240.896 78.208 289.216 93.888 5.248 1.728 10.944-1.152 12.608-6.464l7.68-23.552c1.728-5.248-1.216-10.944-6.464-12.672l-236.736-76.16c-8.448-2.688-9.472-14.208-1.664-18.368l808.256-432.576c2.304-1.216 4.608 1.6 2.88 3.584-60.928 71.04-442.56 515.584-459.648 535.232-18.496 21.312-28.928 43.52-28.928 71.616C410.3104 828.096 410.5664 1015.68 410.5664 1015.68L410.5664 1015.68M410.5664 1015.68" fill="#2c2c2c" p-id="9102"></path><path d="M440.4544 1018.432l-32.64 0-0.256-218.496c-0.064-26.816 9.344-50.112 29.568-73.408 16.576-19.072 381.056-443.712 458.176-533.504l-806.272 431.552c-3.136 1.664-4.032 4.736-3.776 7.04 0.192 2.304 1.664 5.184 4.992 6.272l236.736 76.16c3.264 1.024 5.888 3.328 7.488 6.336 1.536 3.072 1.856 6.528 0.768 9.792l-7.68 23.616c-2.176 6.72-9.408 10.368-16.128 8.192l-289.216-93.888c-12.672-4.096-20.864-14.144-22.08-26.944-1.408-15.872 8.256-31.424 25.344-40.64 31.744-17.088 923.264-493.12 932.288-497.984l3.136-1.728c0.576-0.32 1.088-0.448 1.472-0.576 7.488-5.248 26.24-11.136 46.144 3.008 13.76 9.728 9.792 34.24 7.936 46.016-1.152 7.296-46.72 239.68-86.912 444.736-30.528 155.904-56.96 290.56-59.136 302.272-3.2 17.152-12.608 31.36-26.56 39.872-12.928 7.936-28.096 9.856-42.624 5.504-22.016-6.592-205.376-64.064-283.136-88.512-3.264-1.024-5.952-3.264-7.552-6.336-1.6-3.072-1.856-6.592-0.768-9.856l8-24.192c2.176-6.592 9.344-10.304 15.936-8.192l10.112 3.136c64.832 20.224 262.144 81.728 268.608 83.776 2.24 0.704 4.096 0.64 5.504-0.192 1.984-1.152 2.88-3.712 3.264-5.696 1.088-5.568 52.352-267.584 91.584-468.16l41.856-213.76c0-0.128 0.064-0.512-0.32-0.704-0.448-0.192-0.704 0.064-0.768 0.192-64.448 75.136-478.144 557.184-484.096 564.16-6.144 7.168-12.224 22.912-11.712 36.864 0.448 12.672 0.128 154.112 0.064 197.12C457.7344 1010.752 449.9264 1018.432 440.4544 1018.432zM413.3184 1012.928l27.136 0c6.464 0 11.712-5.248 11.712-11.712 0.064-30.592 0.448-184-0.064-196.928-0.576-15.872 6.272-32.768 12.992-40.64 6.016-6.976 419.648-489.024 484.096-564.16 1.856-2.176 4.8-2.752 7.36-1.536 2.56 1.216 3.904 3.968 3.392 6.72l-41.856 213.76c-39.232 200.576-90.496 462.528-91.648 468.16-0.832 4.416-2.88 7.616-5.888 9.408-2.816 1.664-6.272 1.856-10.048 0.64-6.464-2.048-203.712-63.552-268.608-83.776l-10.112-3.136c-3.776-1.216-7.808 0.896-9.024 4.672l-8 24.192c-0.64 1.856-0.448 3.84 0.448 5.568 0.896 1.728 2.432 3.008 4.288 3.584 60.672 19.072 260.48 81.728 283.072 88.448 13.056 3.904 26.56 2.112 38.144-4.928 12.608-7.68 21.12-20.544 24.064-36.16 2.176-11.776 28.608-146.432 59.136-302.336 40.192-204.992 85.696-437.312 86.848-444.544 1.728-10.688 5.248-32.896-5.632-40.64-17.344-12.352-33.28-7.488-39.296-3.136-0.704 0.512-1.408 0.768-1.984 0.896l-3.648 1.92c-9.024 4.8-900.544 480.832-932.288 497.984-18.048 9.728-23.424 24.576-22.464 35.264 0.96 10.496 7.744 18.752 18.24 22.144l289.216 93.888c3.776 1.216 7.872-0.832 9.152-4.672l7.68-23.616c0.576-1.856 0.448-3.84-0.448-5.568-0.896-1.728-2.368-3.008-4.224-3.584l-236.736-76.16c-4.992-1.6-8.384-5.824-8.832-11.008-0.448-5.184 2.112-9.984 6.72-12.416l808.256-432.576c2.24-1.216 4.864-0.64 6.4 1.28 1.6 1.984 1.536 4.672-0.128 6.528-73.856 86.016-443.008 516.032-459.648 535.232-19.584 22.528-28.288 44.032-28.224 69.76L413.3184 1012.928z" fill="#2c2c2c" p-id="9103"></path></svg>
      <div class="info">动态</div>
    </router-link>
    <router-link class="hot" to="/hot" target="_blank">
      <svg t="1737872867153" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7828" width="200" height="200"><path d="M493.789998 1023.53089C254.799718 1023.53089 85.536259 856.015932 85.536259 625.384341c0-122.523033 72.584129-254.513561 75.782607-259.92965a32.11272 32.11272 0 0 1 31.728902-16.162976c12.879205 1.705855 23.156981 11.088057 26.69663 23.540799 0.255878 0.682342 19.87321 74.887033 45.631621 115.955491 17.271782 27.720143 34.970027 47.16689 54.80059 60.81373-13.433608-58.724057-23.626091-147.129991-6.951359-237.668243C358.771578 63.305131 552.514055 3.642853 560.787452 1.21201a31.814195 31.814195 0 0 1 39.831713 36.93176c-0.213232 1.705855-32.325952 175.95894 35.481784 324.410968 6.183724 13.518901 14.712999 29.084827 23.967262 44.906632a422.199104 422.199104 0 0 1 13.135083-66.698929c24.990775-88.022116 89.344154-118.130456 92.116168-119.281909a31.64361 31.64361 0 0 1 32.496537 4.008759c9.382202 7.249884 13.732132 19.276161 11.64246 31.046561-0.341171 2.217611-9.382202 62.178413 41.196398 147.12999 45.674267 76.678181 58.681411 126.403853 58.68141 221.931731C909.123036 856.143872 734.614073 1023.53089 493.789998 1023.53089zM187.247861 475.269104a407.699336 407.699336 0 0 0-28.10396 147.129991c0 187.814632 138.43013 324.069797 334.774036 324.069797 197.879176 0 341.469517-136.255165 341.469518-324.112443 0-81.198696-9.936605-118.684859-48.275696-183.294116-25.587824-43.072838-38.381737-81.795746-44.181643-112.714367a144.272684 144.272684 0 0 0-15.864451 36.803821c-18.721758 66.10188-13.902718 143.718281-13.902718 144.571208a31.259792 31.259792 0 0 1-20.47026 31.259792 30.278926 30.278926 0 0 1-35.225905-11.301289c-2.430843-3.241124-56.975556-81.454575-81.028111-134.336078-49.896258-109.217364-49.213916-227.475759-44.181643-295.539373-50.5786 29.767169-128.408232 96.423452-153.526947 231.868336-24.308433 131.990528 22.943749 269.951548 23.412859 271.23094a31.430378 31.430378 0 0 1-5.586675 31.728902 30.278926 30.278926 0 0 1-30.278925 9.723373c-3.752881-0.93822-96.551391-23.668738-152.460788-112.970245a376.951301 376.951301 0 0 1-26.568691-54.118249z" fill="#2c2c2c" p-id="7829"></path></svg>
      <div class="info">热门</div>
    </router-link>
    <div class="category-list" :style="{
      'grid-template-columns':`repeat(${proxy.rowCategoryCount},1fr)`
      }">
      <template v-for="item in categoryStore.categoryList">
        <router-link
            class="category-item"
            :to="`/category/${item.categoryCode}`">
          {{item.categoryName}}
        </router-link>
      </template>
    </div>
    <div :class="['category-op iconfont',mouseOver?'icon-up':'icon-down']"
         v-show="categoryStore.categoryList.length > proxy.rowCategoryCount">
    </div>
  </div>
</template>
<script setup>
import {computed, getCurrentInstance,reactive} from "vue";
import {useCategoryStore} from "@/stores/categoryStore.js";
import {useRoute} from "vue-router";
import {ImgURL} from "@/utils/Request.js";

const route = useRoute();
const {proxy} = getCurrentInstance();
const categoryStore = useCategoryStore()

const props = defineProps({
  showType:{
    type:Number,
    default:0
  },
  mouseOver:{
    type:Boolean,
    default:false
  }
})

const RoutreRef = reactive({
    rou1:{
      title:'专栏',
      to:'/dynamic'
    },
    rou2:{
      title:'直播',
      to:'/dynamic'
    },
    rou3:{
      title:'活动',
      to:'/dynamic'
    },
    rou4:{
      title:'课堂',
      to:'/dynamic'
    },
    rou5:{
      title:'社区中心',
      to:'/dynamic'
    },
    rou6:{
      title:'新歌热榜',
      to:'/dynamic'
    },
})

const showItemCount = computed(()=>{
  let count = categoryStore.categoryList.length;
  if(categoryStore.categoryList.length>proxy.rowCategoryCount*2){
    count = proxy.rowCategoryCount*2-1;
  }
  return count;
})
</script>
<style lang="scss" scoped>
.category{
  display: flex;
  align-items: center;
  .hot{
    text-align: center;
    margin-right: 25px;
    text-decoration: none;
    color: var(--text);
    .icon-hot,.img-dt{
      width: 46px;
      height: 46px;
      background-color: #f07775;
      color: #fff;
      font-size: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .img-dt{
      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .info{
      margin-top: 8px;
    }
  }
  .category-list{
    width: 100%;
    display: grid;
    grid-gap: 8px;
    .category-item{
     line-height: 25px;
      font-size: 14px;
      padding: 0 4px;
      text-overflow: ellipsis;
      white-space: nowrap;
      letter-spacing: 2px;
      border: 1px solid #f1f2f3;
      border-radius: 6px;
      background-color: #f6f7f8;
      color: #61666d;
      text-align: center;
      font-weight: 500;
      text-decoration: none;
      &:hover{
        background-color: #e1e3e4;
      }
    }
    .active{
      color: var(--blue);
    }
    .btn-category-more{
      .iconfont{
        font-size: 12px;
      }
      .icon-up{
        display: none;
      }
    }
    .category-more{
      margin-left: 5px;
    }
  }
  .category-op{
    float: right;
    margin-left: 5px;
    margin-top: 7px;
  }
  .hot-out{
    width: 80px;
    height: 30px;
    display: flex;
    align-items: center;
    .icon-hot{
      width:30px;
      font-size: 25px;
      height: auto;
      background: none;
      color: #61666d;
    }
    .info{
      margin-top: 0;
      font-size: 15px;
      color: #61666d;
    }
  }
}

.category-out{
  overflow: hidden;
  height: 32px;
}

.category-pro{
  .category-list{
    width: 65%;
  }
  .hot{
    display: flex;
    align-items: center;
    .icon{
      width: 24px;
      height: 24px;
      fill: #409EFF;
    }
  }
  .info{
    margin-top: 0 !important;
    margin-left: 5px !important;
  }
}

.child-list{
  display: flex;
  flex-wrap: wrap;
  .child{
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #61666d;
    padding: 5px;
    width: 65px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    &:hover{
      background: #e5e5e5;
      border-radius: 4px;
    }
    a{
      text-decoration: none;
      color: #61666d;
    }
  }
}
.channel-right{
  width: 240px;
  height: 66px;
  display: flex;
  justify-items: center;
  align-items: center;
  margin-left: 25px;
  border-left: 1px solid #e3e5e7;
  .channel-list{
    grid-column: span 1;
    grid-row-gap: 10px;
    grid-auto-flow: column;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    flex-shrink: 0;
    width: 240px;
    .channel-item{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      height: 100%;
      font-size: 14px;
      color: var(--text2);
      text-align: center;
      font-weight: 400;
      transition: background-color .3s, color .3s;
      text-decoration: none;
      .icon{
        width: 18px;
        height: 18px;
        margin-right: 5px;
      }
      #icon1{
        width: 18px;
        height: 18px;
        margin-right: 5px;
      }
      &:hover{
        .icon{
          fill: #409EFF;
        }
        #icon1{
          fill: #409EFF;
        }
        color: #409EFF;
      }
    }
  }
}
</style>